<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width" />
		<title>header</title>
		<!--<link rel="stylesheet" type="text/css" href="../css/common.min.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
			}
			#wrap {
				height: 100%;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-flex-flow: column;
				flex-flow: column;
			}
			#main {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			.mui-tab-item {
				background-color: #3E9FEC;
				padding: 15px;
			}
			.mui-bar-tab .mui-tab-item.mui-active {
				line-height: 0px;
			}
			.mui-bar-tab .normal {
				height: 30px;
				background-color: #3E9FEC;
				position: absolute;
				bottom: 0px;
				width: 18%;
				float: left;
			}
			.mui-bar-tab .big {
				/*height: 100%;*/
				
				background-color: #3E9FEC;
				width: 28%;
			}
			#footer {
				background-color: #3E9FEC;
				height: 44px;
			}
			#footer a {
				background-size: auto 44px;
				background-repeat: no-repeat;
				background-position: center;
			}
			#prev {
				background: url(../image/prev.png);
			}
			#showanswer {
				background-image: url(../image/show_answer.png);
			}
			#page {
				background-image: url(../image/button-background.png);
			}
			#favor {
				background-image: url(../image/favour.png);
			}
			#next {
				background-image: url(../image/next.png);
			}
		</style>
		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<div id="wrap">
			<header id="header" class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-pull-lefty" onclick="api.closeWin()"><img src="../image/cancle.png" style="height: 24px;" /></a>
				<h1 class="mui-title" id="timer">答题</h1>
				<a class="mui-icon mui-pull-right" id="ok" ><img src="../image/ok.png" style="height: 24px;" /></a>
			</header>
			<div id="main">
			</div>
			<nav class="mui-bar mui-bar-tab" id="footer">
				<a class="mui-tab-item" id="prev">
				</a>
				<a class="mui-tab-item">
				</a>
				<a class="mui-tab-item" id="page" style="font-size: 12px;background-image: url(../image/button-background.png);background-size:68px auto;background-repeat: no-repeat;color:#2681ba;">
					<span id="pageno"></span>/<span id="total"></span>
				</a>
				<a class="mui-tab-item">
				</a>
				<a class="mui-tab-item" id="next">
				</a>
			</nav>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		MYPAGE = {};

		function pad(num, n) {
			var len = num.toString().length;
			while (len < n) {
				num = '0' + num;
				len++;
			}
			return num;
		}

		function formatsecond(second) {
			var timerseconds = pad(second % 60, 2);
			var timerminutes = Math.floor(second / 60);
			var newtimer = timerminutes + ":" + timerseconds;
			return newtimer;
		}

		function change(second, timer) {
			second--;
			if (second > -1) {
				document.getElementById("timer").innerHTML = formatsecond(second);
				localStorage.setItem('timer' + MYPAGE.id, second);
				timer = setTimeout('change(' + second + ',timer)', 1000); //调用自身实现
			} else {
				api.sendEvent({
					name: 'ok'
				});
			}
		}
		apiready = function() {
			var data = api.pageParam;
			//			var second = data.timer;
			MYPAGE.id = data.id;
			var second = localStorage.getItem('timer' + MYPAGE.id);
			var timer;
			change(second, timer);
			var header = $api.byId('header');
			$api.fixIos7Bar(header);
			var header_h = $api.offset(header).h;
			var footer = $api.byId('footer');
			var footer_h = $api.offset(footer).h
			var main = $api.byId('main');
			var main_h = $api.offset(main).h;
			var rect_h = main_h - header_h - footer_h;
			api.openFrame({
				bounces: false,
				name: 'test-con',
				url: 'test-con.html',
				pageParam: data,
				rect: {
					x: 0,
					y: header_h,
					w: 'auto',
					h: rect_h
				}
			});
			document.getElementById("prev").addEventListener('tap', function() {
				api.sendEvent({
					name: 'slidePrev'
				});
			});
			document.getElementById("next").addEventListener('tap', function() {
				api.sendEvent({
					name: 'slideNext'
				});
			});
			api.addEventListener({
				name: 'slideChange'
			}, function(ret, err) {
				if (ret && ret.value) {
					var value = ret.value;
					document.getElementById("pageno").innerHTML = value.pageno;
					document.getElementById("total").innerHTML = value.total;
					//					alert(value.key1 + ' , ' + value.key2);     
				}
			});
			document.getElementById("ok").addEventListener('tap', function() {
				api.sendEvent({
					name: 'ok'
				});
			});
		}
	</script>

</html>